<template>
  <div id="login-page">
    <div class="loginbox">
      <!-- <i class="el-icon-user"></i> -->

      <h2 class="login_title">新用户注册</h2>

      <input
        class="inp"
        type="text"
        placeholder="账号"
        v-model="user"
        @blur="checkuser"
      />
      <div class="warn">
        <span ref="span1"></span>
      </div>
      <input
        v-model="pwd"
        type="password"
        placeholder="密码"
        @blur="checkpwd"
        class="inp"
      />
      <div class="warn">
        <span ref="span2"></span>
      </div>
      <input
        v-model="regpwd"
        type="password"
        placeholder="请再次输入密码"
        @blur="checkregpwd"
        class="inp"
      />
      <div class="warn">
        <span ref="span3"></span>
      </div>
      <button class="loginbt" @click="checkall">注册</button>
    </div>
  </div>
</template>
sc
<script>
// import { getUser } from "@/axios/index";
export default {
  name: "Login",
  data() {
    return {
      user: "",
      pwd: "",
      regpwd: "",
      spanshow1: true,
      spanshow2: false,
      yanzhen: "", //输入框双向绑定的值
      true_code: "", //保存正确的验证码
      yanzhen_arr: [], //只用于传参，并且数组长度不能「多于」下面验证码遍历的次数，不然最终得到的true_code会有问题
      //比如下面是4个验证码，可以是[1,2,3,4]及以下，但是不能是[1，2，3，4，5]， 因为5无法被替换
    };
  },
  mounted() {
    // this.draw(this.yanzhen_arr);
  },
  methods: {
    //服务器验证账号密码
    //通过跳转首页
    // 更改登录|注册 样式
    //不通过弹窗
    checkuser() {
      let userreg = /^[a-zA-Z0-9][\w]{3,16}$/;
      setTimeout(() => {
        if (this.user == "") {
          this.$refs.span1.innerHTML = "请填写用户名";
        } else if (!userreg.test(this.user)) {
          this.$refs.span1.innerHTML = "用户名不合法";
        } else {
          this.$refs.span1.innerHTML = "";
          return true;
        }
      }, 500);
      // getUser({
      //   uname: this.loginForm.loginName,
      //   upwd: this.loginForm.password,
      // }).then((res) => {
      //   console.log(res.data);
      //   if (res.data.code == 200) {
      //     alert("sucess");
      //   } else alert("fail");
      // });
    },
    checkpwd() {
      setTimeout(() => {
        let pwdreg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{3,16}$/;
        if (this.pwd == "") {
          this.$refs.span2.innerHTML = "密码不可为空";
        } else if (!pwdreg.test(this.pwd)) {
          this.$refs.span2.innerHTML = "密码不合法";
        } else {
          this.$refs.span2.innerHTML = "";
          return true;
        }
      }, 500);
    },
    checkregpwd() {
      setTimeout(() => {
        let pwdreg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{3,16}$/;
        if (this.pwd == "") {
          this.$refs.span3.innerHTML = "密码不可为空";
        } else if (!pwdreg.test(this.pwd)) {
          this.$refs.span3.innerHTML = "密码不合法";
        } else if (this.pwd != this.regpwd) {
          this.$refs.span3.innerHTML = "密码不一致";
        } else {
          this.$refs.span3.innerHTML = "";
          return true;
        }
      }, 500);
    },
    checkall() {
      console.log(this.user, this.pwd);
    },
    goregister() {
      this.$router.push("/registe");
    },
  },
};
</script>

<style scoped>
.loginbox .warn {
  height: 25px;
  color: red;
}
.loginbox .inp {
  display: block;
  height: 45px;
  width: 100%;
  /* margin-bottom: 25px; */
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.el-icon-user {
  color: #505458;

  font-size: 30px;
}
#login-page {
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
  text-align: center;
  user-select: none;
}

.loginbox {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 90px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: rgba(255, 255, 255, 0.116);
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6a2;
}

.loginbt {
  height: 40px;
  border-radius: 15px;
  border: none;
  width: 100%;
  background-color: #fa7d3ed7;
  cursor: pointer;
  color: white;
}
.loginbt:hover {
  background-color: #fa7e3e;
}
.loginb {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
.box3 {
  display: flex;
  margin-bottom: 15px;
}
#canvas {
  float: right;
  margin-right: 1%;
  display: block;
  border: 1px solid #ccc;
  border-radius: 10px;
  cursor: pointer;
  margin-right: 80px;
}

.input-val {
  width: 100px;
  background: #ffffff;
  height: 2.8rem;
  border-radius: 10px;
  border: none;
  padding: 0 0 0 12px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  margin-right: 10px;
}
</style>
